<template>
    <div class="detail-page">
        <!-- 导航栏 -->
        <view class="navigation-bar">
            <text class="navigation-bar-title">{{ detail.title }}</text>
        </view>
        
        <!-- 详情内容 -->
        <scroll-view class="detail-content" scroll-y>
            <!-- 轮播图 -->
            <swiper class="img-swiper" :indicator-dots="true" :autoplay="true" :interval="3000">
                <swiper-item v-for="(imgUrl, index) in detail.imgUrls || [detail.imgUrl]" :key="index">
                    <image :src="imgUrl" mode="aspectFill" class="detail-img"></image>
                </swiper-item>
            </swiper>
            
            <!-- 景点基本信息 -->
            <view class="basic-info">
                <view class="location">
                    <text class="location-icon">📍</text>
                    <text class="location-text">{{ detail.location }}</text>
                </view>
                <view class="rating">
                    <text class="rating-icon">⭐️</text>
                    <text class="rating-text">{{ detail.rating }}</text>
                </view>
            </view>
            
            <!-- 景点描述 -->
            <view class="description-box">
                <text class="section-title">景点介绍</text>
                <text class="description-text">{{ detail.introduction }}</text>
            </view>
            
            <!-- 更多详细信息 -->
            <view class="info-box">
                <view class="section-title">基本信息</view>
                <view class="info-item">
                    <text class="info-label">开放时间：</text>
                    <text class="info-value">{{ detail.openTime }}</text>
                </view>
                <view class="info-item">
                    <text class="info-label">门票价格：</text>
                    <text class="info-value">{{ detail.ticketPrice }}</text>
                </view>
                <view class="info-item">
                    <text class="info-label">交通指南：</text>
                    <text class="info-value">{{ detail.transportation }}</text>
                </view>
                <view class="info-item">
                    <text class="info-label">建议游玩时间：</text>
                    <text class="info-value">{{ detail.recommendedTime }}</text>
                </view>
            </view>
            
            <!-- 底部操作栏 -->
            <view class="action-bar">
                <!-- 分享按钮 -->
                <button 
                    class="action-btn"
                    :class="{ 'action-btn-active': shareStatus }"
                    @click="handleShare"
                >
                    <text class="action-icon">{{ shareStatus ? '✅' : '📤' }}</text>
                    <text class="action-text">{{ shareStatus ? '已分享' : '分享' }}</text>
                </button>
                
                <!-- 收藏按钮 -->
                <button 
                    class="action-btn"
                    :class="{ 'action-btn-active': checkList[0] }"
                    @click="favClick(0)"
                >
                    <text class="action-icon">{{ checkList[0] ? '✅' : '❤️' }}</text>
                    <text class="action-text">{{ checkList[0] ? '已收藏' : '收藏' }}</text>
                </button>
            </view>
        </scroll-view>
    </div>
</template>

<script>
export default {
    data() {
        return {
            detail: {},
            checkList: [false], // 收藏状态
            shareStatus: false, // 分享状态
            contentText: {
                contentDefault: '收藏',
                contentFav: '已收藏'
            }
        };
    },
    
    onLoad(options) {
        try {
            this.detail = JSON.parse(decodeURIComponent(options.detail));
            console.log('加载详情数据:', this.detail);
            
            // 恢复收藏状态
            const savedFavStatus = uni.getStorageSync(`fav_status_${this.detail.id || 0}`);
            if (savedFavStatus !== '') {
                this.checkList[0] = savedFavStatus;
            }
            
            // 恢复分享状态
            const savedShareStatus = uni.getStorageSync(`share_status_${this.detail.id || 0}`);
            if (savedShareStatus !== '') {
                this.shareStatus = savedShareStatus;
            }
        } catch (e) {
            console.error('解析数据失败:', e);
            uni.showToast({ title: '加载失败', icon: 'none' });
        }
    },
    
    methods: {
        // 收藏功能
        favClick(index) {
            this.checkList[index] = !this.checkList[index];
            uni.setStorage({
                key: `fav_status_${this.detail.id || index}`,
                data: this.checkList[index]
            });
            this.$forceUpdate();
            
            uni.showToast({
                title: this.checkList[index] ? '已收藏' : '已取消',
                icon: 'none',
                duration: 1000
            });
        },
        
        // 分享功能
        handleShare() {
            // 如果是第一次点击分享按钮，则执行实际分享逻辑
            if (!this.shareStatus) {
                uni.showShareMenu({
                    withShareTicket: true,
                    success: () => {
                        this.shareStatus = true;
                        this.$forceUpdate();
                        
                        uni.showToast({
                            title: '分享成功',
                            icon: 'success',
                            duration: 1500
                        });
                        
                        // 保存分享状态
                        uni.setStorage({
                            key: `share_status_${this.detail.id || 0}`,
                            data: true
                        });
                    },
                    fail: (err) => {
                        console.error('分享失败:', err);
                        uni.showToast({
                            title: '分享失败，请重试',
                            icon: 'none',
                            duration: 1500
                        });
                    }
                });
            } else {
                // 如果已经分享过，点击则提示
                uni.showToast({
                    title: '您已分享过此内容',
                    icon: 'none',
                    duration: 1500
                });
            }
        }
    }
};
</script>

<style scoped>
/* 导航栏样式 */
.navigation-bar {
    background-color: #98d361;
    color: white;
    text-align: center;
    padding: 20rpx;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.navigation-bar-title {
    font-size: 36rpx;
    font-weight: bold;
}

/* 详情内容样式 */
.detail-content {
    width: 100%;
    background-color: #f8f8f8;
}

.img-container {
    width: 100%;
    height: 400rpx;
    overflow: hidden;
}

.img-swiper {
  width: 100%;
  height: 400rpx;
}

.detail-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.basic-info {
    display: flex;
    padding: 20rpx;
    background-color: white;
    border-bottom: 1rpx solid #eee;
}

.location, .rating {
    display: flex;
    align-items: center;
    margin-right: 40rpx;
}

.location-icon, .rating-icon {
    font-size: 28rpx;
    margin-right: 10rpx;
}

.location-text, .rating-text {
    font-size: 28rpx;
    color: #333;
}

.description-box {
    padding: 20rpx;
    background-color: white;
    margin-top: 20rpx;
}

.section-title {
    display: block;
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 15rpx;
}

.description-text {
    font-size: 28rpx;
    color: #666;
    line-height: 1.5;
}

.info-box {
    padding: 20rpx;
    background-color: white;
    margin-top: 20rpx;
}

.info-item {
    display: flex;
    align-items: center;
    padding: 15rpx 0;
    border-bottom: 1rpx solid #eee;
}

.info-item:last-child {
    border-bottom: none;
}

.info-label {
    font-size: 28rpx;
    color: #999;
    width: 200rpx;
}

.info-value {
    font-size: 28rpx;
    color: #333;
}

.action-bar {
    display: flex;
    justify-content: space-around;
    padding: 30rpx 0;
    background-color: white;
    margin-top: 20rpx;
    border-top: 1rpx solid #eee;
}

.action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 300rpx;
    height: 80rpx;
    border-radius: 50rpx;
    background-color: #f0f0f0;
    color: #333;
    font-size: 28rpx;
    transition: all 0.3s;
}

.action-icon {
    margin-right: 10rpx;
    font-size: 32rpx;
}

.action-btn-active {
    background-color: #1677ff;
    color: white;
}
</style>